import React, { useState } from 'react';
import { Table, Space, Button, Popover } from 'antd'

function UserList(props) {
  const [showPopover, setShowPopover] = useState({})
  const handleOpenChange = (record, val) => {
    setShowPopover({...showPopover, [record.id]: val})
  }
  const popoverDom = (props) => (
    <div className='pop-main'>
      <div className='pop-desc'>是否删除次用户？</div>
      <div className='pop-btn'>
        <Button size='small' danger>确定</Button>
        <Button size='small' onClick={() => handleOpenChange(props.row, false)}>取消</Button>
      </div>
    </div>
  )
  const columns = [{
    title: 'ID',
    dataIndex: 'id',
    key: 'id',
  },
  {
    title: '用户名',
    dataIndex: 'userName',
    key: 'userName',
  },
  {
    title: '手机号',
    dataIndex: 'phone',
    key: 'phone',
  },{
    title: '学校名称',
    dataIndex: 'schoolName',
    key: 'schoolName',
  },{
    title: '专业',
    dataIndex: 'majorName',
    key: 'majorName',
  },{
    title: '操作',
    key: 'action',
    render: (_, record) => (
      <Space size="middle">
        <Button type="primary" ghost onClick={() => handleClick(1, record)}>编辑</Button>
        <Popover
          content={popoverDom({row:record})}
          trigger="click"
          open={showPopover[record.id]}
          onOpenChange={(val) => handleOpenChange(record, val)}
        >
          <Button danger>删除</Button>
        </Popover>
      </Space>
    )
  }]
  const [loading, setLoading] = useState(false)
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 100
  })
  const handleTableChange = (pagination) => {
    setPagination(pagination)
  }
  // type 1 编辑 0 删除
  const handleClick = (type, row) => {
    if (type === 1) {
      props.setRowData(row)
      props.setOpen(true)
    }
  }
  return (
    <Table
      rowKey="id"
      dataSource={props.dataSource}
      columns={columns}
      pagination={pagination} 
      loading={loading}
      onChange={handleTableChange}
      scroll={{ y: 610 }}/>
  )
}

export default UserList;